<template>
  <view class="component-amap">
	  <!-- <view class="head_menu">
		  <div class="head_menu_item">
		    <u--image src="/static/people/people (1).png" width="32" height="32" shape="circle" class="user_portrait animate__animated animate__backInLeft" :fade="true" duration="450" mode="cover" @click="leftpopup = true" v-if="!leftpopup"></u--image>
	  	 </div>
		 <div class="head_menu_item">
		    <u--image src="/static/people/people (1).png" width="24" height="24" shape="circle" class="user_portrait" :fade="true" duration="450" mode="cover"></u--image>
		 	 <u--image src="/static/people/people (1).png" width="24" height="24" shape="circle" class="user_portrait" :fade="true" duration="450" mode="cover"></u--image>
		 </div>
	  </view> -->
    <view class="loading">地图加载中</view>
    <view id="amap" class="amap" :listArr="listArr" :change:listArr="ModuleInstance.setParkList"></view>
	<!-- <view class="bottom_menu">
		 <u-tabs :list="tabList" @click="tabclick"></u-tabs>
			<u-scroll-list>
			        <view v-for="(item, index) in list" :key="index">
			            <image :src="item.thumb"></image>
			        </view>
			    </u-scroll-list>
	</view> -->
	<!-- 左侧功能栏 -->
	<!-- <u-popup :show="leftpopup" mode="left"  @close="close" @open="open">
	        <view class="left_menu">
				<view class="head_box">
					<u--image src="/static/people/people (1).png" width="24" height="24" shape="circle" class="user_portrait" :fade="true" duration="450" mode="cover"></u--image>
				</view>
				<view class="left_link_menu" @click="leftclick(0)">
					抽奖
				</view>
				<view class="left_link_menu" @click="leftclick(1)">
					二维码
				</view>
	            <text>人生若只如初见，何事秋风悲画扇</text>
	        </view>
	</u-popup> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
	  // 左侧开关
       leftpopup:false,
	  // 地图点位
      listArr: [],
	  // 底部导航栏
	  tabList: [{
	                      name: '关注',
	                  }, {
	                      name: '推荐',
	                  }, {
	                      name: '电影'
	                  }, {
	                      name: '科技'
	                  }, {
	                      name: '音乐'
	                  }, {
	                      name: '美食'
	                  }, {
	                      name: '文化'
	                  }, {
	                      name: '财经'
	                  }, {
	                      name: '手工'
	                  }],
	 list: [{
	                    thumb: "/static/people/people (1).png"
	                }, {
	                     thumb: "/static/people/people (1).png"
	                }, {
	                     thumb: "/static/people/people (1).png"
	                }, {
	                     thumb: "/static/people/people (1).png"
	                }, {
	                     thumb: "/static/people/people (1).png"
	                }]
    };
  },
  /*注意：uniapp子组件是没onLoad()和onShow()生命周期，只有页面组件才有 */
  mounted() {
    this.getDataList();
  },
  methods: {
	  leftclick(num){
		  if(num == 0){
			  uni.navigateTo({
				   url:'../tiger/tiger'
			  })
		  }else if(num == 1){
			  uni.navigateTo({
			  	 url:'../tiger/tiger'
			  })
		  }
	  },
	  // 左侧功能-开
	  open() {
	          // console.log('open');
	        },
	  // 左侧功能-关
	  close() {
	          this.leftpopup = false
	          // console.log('close');
	        },
	  //底部点击
	  tabclick(item) {
                console.log('item', item);
            },
    //获取数据
    getDataList() {
		uni.getLocation({
		    type: 'wgs84',
			isHighAccuracy:true,
		    success: function (res) {
		        console.log('当前位置的经度：' + res.longitude);
		        console.log('当前位置的纬度：' + res.latitude);
		    }
		});
      this.listArr = [
        {
          sysParkId: "1474279383801511937",
          sysParkName: "测试",
          lng: 120.39934, 
          lat: 36.31256,
          address: "测试具体位置",
          head: "15847441451",
          phone: "13845545445",
        },
        {
          sysParkId: "1509865555600539649",
          sysParkName: "新增",
          lng: 120.39670,
          lat: 36.30228,
          address: "测试详细地址",
          head: "测试",
          phone: "18445544444",
        },
      ];
    },
    //跳转到详情页面
    goDetails({ sysParkId }) {
      uni.navigateTo({
        url: `/pages/statisticsAdminSingle/index?sysParkId=${sysParkId}`,
      });
    },
  },
};
</script>
<script module="ModuleInstance" lang="renderjs">
export default {
    data() {
        return {
            map:null,
            layer:null,
            parkList:[],
        };
    },
    mounted(){
        if (window.AMap) {
            // 观测更新的数据在 view 层可以直接访问到
            this.initAmap();
        } else {
            // 动态引入较大类库避免影响页面展示
            const script = document.createElement('script');
            // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
            script.src = `https://webapi.amap.com/maps?v=2.0&key=b0c8fc70cd402ddb153c3416e9261d50`;//您申请的key值
            //script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的
            script.onload = () => {
                window._AMapSecurityConfig = {
                    securityJsCode:'f1b946e6f51b1235374f1f92c38b0c33',//您申请的安全密钥
                }
                this.initAmap();
            }
            document.head.appendChild(script); 
        }
    },
    beforeDestroy() {
         
    },
    methods: {
        initAmap(){
            this.map = new AMap.Map('amap', {
                zoom: 13,//显示的缩放级别
                zooms: [15, 30],//地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
                center: [113.276521,23.133519],
            });
            this.map.on("complete", ()=>{
                console.log("地图加载完成！");  
                this.createLabelsLayer();
            });
        },
        //创建-海量点
        createLabelsLayer(){
            // 创建 AMap.LabelsLayer 图层
            if(!this.map)return;
            if(!this.layer){
                this.layer = new AMap.LabelsLayer({
                    zIndex: 1000,
                    collision: false
                });
                // 将图层添加到地图
                this.map.add(this.layer);
            }
            this.removeAllOverlay();

            var markers = [];
            var icon = {
                type: 'image',
                image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                size:[26,34],
                anchor: 'bottom-center',
            };

            this.parkList.forEach((element,index) => {
                element.position = [element.lng,element.lat];
                var labelMarker = new AMap.LabelMarker({
                    position: element.position,
                    icon,
                });
                markers.push(labelMarker);
                labelMarker.on('click', (e)=>{
                    // 给marker绑定事件
                    this.openInfo(element); 
                }); 
            });

            // 一次性将海量点添加到图层
            this.layer.add(markers);
			// 获取所有点的坐标
			var path = markers.map(marker => marker.getPosition());
			
			// 创建一条线
			var line = new AMap.Polyline({
			    path: path,
			    strokeColor: "#00FF00",  // 线颜色
			    strokeOpacity: 1,  // 线透明度
			    strokeWeight: 3,  // 线宽
			    strokeStyle: "solid"  // 线样式
			});
			
			// 将线添加到地图
			this.map.add(line);
            if(!this.isExistImplement){
                this.isExistImplement = true;//只执行一次
                this.map.setFitView(null, false, [60, 15, 30, 15]);//自适应显示多个点标记
                let zoom = this.map.getZoom(); //获取当前地图级别
                if(zoom>5)this.map.setZoom(5); //设置地图层级
            }

        },
        //在指定位置打开信息窗体
        openInfo(obj){
            //构建信息窗体中显示的内容
			//                     // <div class="park-name">${obj.sysParkName || 'XXX园区'}</div>
            let domStr = `
                <div class="map-open-info">

					<div class="park-name">${'展示信息'}</div>
                    <div class="button">查看更多</div>
                </div>           
            `;
            var infoWindow = new AMap.InfoWindow({
                zIndex:99999,
                offset: [0,-38],//偏移
                content: domStr,  //使用默认信息窗体框样式，显示信息内容
            }); 
            infoWindow.open(this.map, obj.position);

            var button = document.querySelector('.map-open-info .button');
            button.onclick = ()=>{
                uni.navigateTo({
                    url: `/pages/statisticsAdminSingle/index?sysParkId=${obj.sysParkId}`,
                });
                //this.$ownerInstance.callMethod('goDetails', {sysParkId:obj.sysParkId})
            }
        },
        removeAllOverlay(){
            // 清除地图上所有添加的覆盖物
            this.map.clearMap();
        },
        //接收数组参数
        setParkList(newValue, oldValue, ownerInstance, instance){
            this.parkList = newValue;
            this.createLabelsLayer();
        },
    },
};
</script>

<style lang="scss">
//高德地图-logo隐藏
/deep/.amap-logo {
  display: none;
  opacity: 0 !important;
}
//高德地图-版权隐藏
/deep/.amap-copyright {
  opacity: 0;
}
/deep/.map-open-info {
  width: 80vw;
  position: relative;
  .park-name {
    font-size: 30rpx;
    font-weight: bold;
  }
  .position,
  .person,
  .phone {
    font-size: 28rpx;
    padding: 5rpx 0rpx;
  }
  .button {
    font-size: 26rpx;
    font-weight: 500;
    color: #1980ff;
    padding: 15rpx 15rpx;
    background: #f3faff;
    border-radius: 8rpx;
    position: absolute;
    right: -15rpx;
    bottom: 0rpx;
    cursor: pointer;
  }
}
.component-amap {
	width: 100vw;
	height:100vh;
	max-height: 100vh;
	overflow:hidden;
    position: relative;
  .loading {
    position: absolute;
    top: -10vh;
    left: 50%;
    transform: translateX(-50%);
  }
  .amap {
	width: 100vw;
	height: 100vh;
    // min-height: 300px;
    // height: 100%;
    position: relative;
    z-index: 8;
  }
}
// 头部菜单栏
.head_menu{
	width: 100vw;
	height: 8vh;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx;
	background: transparent !important;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 30;
	.head_menu_item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}


// 底部菜单
.bottom_menu{
	width: 100vw;
	height: auto;
	min-height: 20vh;
	background-color: #ffffff;
	border-top-left-radius: 2vw;
	border-top-right-radius: 2vw;
	padding: 16rpx;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.bottom_item{
		width: 90vw;
		height: 5rpx;
	}
}
</style>
